<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统监控面板</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --bg-dark: #0f0f23;
            --bg-card: rgba(26, 26, 46, 0.8);
            --accent-blue: #00d4ff;
            --accent-green: #00ff88;
            --accent-orange: #ff9500;
            --accent-red: #ff3366;
            --text-primary: #ffffff;
            --text-secondary: #a0a0b0;
            --border-glow: rgba(0, 212, 255, 0.3);
        }

        .text-muted {
            color: var(--text-secondary) !important;
        }

        .dashboard-header .btn-outline-light {
            position: relative;
            z-index: 999; /* 拉到最前 */
            pointer-events: auto;
        }

        .metric-card {
            min-height: 220px;
        }

        body {
            background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a2e 100%);
            color: var(--text-primary);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            padding-bottom: 60px; /* 你想留多少就调多少 */
        }

        .dashboard-header {
            background: linear-gradient(90deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 136, 0.2) 100%);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-glow);
            padding: 20px 0;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }

        .dashboard-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }

        .metric-card {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .metric-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
            border-color: var(--border-glow);
        }

        .metric-card:hover::before {
            opacity: 1;
        }

        .metric-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            background: linear-gradient(45deg, var(--accent-blue), var(--accent-green));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .metric-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
        }

        .metric-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .progress-custom {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
            margin-top: 15px;
        }

        .progress-bar-custom {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
            border-radius: 5px;
            transition: width 0.5s ease;
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
        }

        .disk-card {
            background: rgba(26, 26, 46, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .disk-card:hover {
            background: rgba(26, 26, 46, 0.8);
            border-color: var(--accent-blue);
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }

        .section-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--accent-blue);
            display: inline-block;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 15, 35, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 3px solid rgba(0, 212, 255, 0.3);
            border-top: 3px solid var(--accent-blue);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .floating-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--accent-blue);
            border-radius: 50%;
            opacity: 0.5;
            animation: float 6s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.5;
            }
            90% {
                opacity: 0.5;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<!-- 加载动画 -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
</div>

<!-- 浮动粒子背景 -->
<div class="floating-particles" id="particles"></div>

<!-- 头部 -->
<div class="dashboard-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="mb-0"><i class="fas fa-server me-3"></i>系统监控中心</h1>
                <p class="mb-0 text-muted">实时监控系统状态 | 最后更新: <span id="lastUpdate">--:--:--</span></p>
            </div>
            <div class="col-md-4 text-end">
                <button class="btn btn-outline-light" onclick="refreshData()">
                    <i class="fas fa-sync-alt me-2"></i>刷新数据
                </button>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <!-- 系统概览 -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="section-title"><i class="fas fa-tachometer-alt me-2"></i>系统概览</h2>
        </div>
    </div>

    <div class="row">
        <!-- CPU 使用率 -->
        <div class="col-lg-3 col-md-6">
            <div class="metric-card">
                <div class="text-center">
                    <i class="fas fa-microchip metric-icon"></i>
                    <div class="metric-value" id="cpuUsage"></div>
                    <div class="metric-label" id="cpuName"></div>
                    <div class="progress-custom">
                        <div class="progress-bar-custom" id="cpuProgress" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内存使用率 -->
        <div class="col-lg-3 col-md-6">
            <div class="metric-card">
                <div class="text-center">
                    <i class="fas fa-memory metric-icon"></i>
                    <div class="metric-value" id="memoryUsage"></div>
                    <div class="metric-label" id="memoryTotal"></div>
                    <div class="progress-custom">
                        <div class="progress-bar-custom" id="memoryProgress" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- JVM使用率 -->
        <div class="col-lg-3 col-md-6">
            <div class="metric-card">
                <div class="text-center">
                    <i class="fas fa-server  metric-icon"></i>
                    <div class="metric-value" id="jvmUsage"></div>
                    <div class="metric-label" id="jvmTotal"></div>
                    <div class="progress-custom">
                        <div class="progress-bar-custom" id="jvmProgress" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 运行时间 -->
        <div class="col-lg-3 col-md-6">
            <div class="metric-card">
                <div class="text-center">
                    <i class="fas fa-clock metric-icon"></i>
                    <div class="metric-value" id="uptime">0天</div>
                    <div class="metric-label">运行时间</div>
                    <small class="text-muted" id="uptimeDetail">0小时 0分钟</small>
                </div>
            </div>
        </div>
    </div>

    <!-- 硬盘监控 -->
    <div class="row mt-5">
        <div class="col-12">
            <h2 class="section-title"><i class="fas fa-hdd me-2"></i>硬盘监控</h2>
        </div>
    </div>

    <div class="row" id="diskContainer">
        <!-- 硬盘信息将通过JavaScript动态插入 -->
    </div>


</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 创建浮动粒子
    function createParticles() {
        const particlesContainer = document.getElementById('particles');
        for (let i = 0; i < 20; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 6 + 's';
            particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
            particlesContainer.appendChild(particle);
        }
    }

    // 模拟API数据
    function simulateData() {
        return {
            cpu: {
                usage: Math.floor(Math.random() * 100),
                temperature: Math.floor(Math.random() * 30) + 40
            },
            memory: {
                usage: Math.floor(Math.random() * 100),
                total: '8GB',
                used: Math.floor(Math.random() * 8) + 'GB'
            },
            jvm: {
                usage: Math.floor(Math.random() * 100),
                total: '8GB',
                used: Math.floor(Math.random() * 8) + 'GB'
            },
            system: {
                uptime: Math.floor(Math.random() * 30) + 1,
                uptimeDetail: Math.floor(Math.random() * 24) + '小时 ' + Math.floor(Math.random() * 60) + '分钟'
            },
            disks: [
                {
                    name: '系统盘',
                    path: '/',
                    total: '256GB',
                    used: Math.floor(Math.random() * 200) + 'GB',
                    free: Math.floor(Math.random() * 56) + 'GB',
                    usage: Math.floor(Math.random() * 100),
                    temperature: Math.floor(Math.random() * 20) + 35
                },
                {
                    name: '数据盘',
                    path: '/data',
                    total: '1TB',
                    used: Math.floor(Math.random() * 800) + 'GB',
                    free: Math.floor(Math.random() * 200) + 'GB',
                    usage: Math.floor(Math.random() * 100),
                    temperature: Math.floor(Math.random() * 20) + 35
                },
                {
                    name: '移动硬盘1',
                    path: '/mnt/usb1',
                    total: '2TB',
                    used: Math.floor(Math.random() * 1500) + 'GB',
                    free: Math.floor(Math.random() * 500) + 'GB',
                    usage: Math.floor(Math.random() * 100),
                    temperature: Math.floor(Math.random() * 20) + 30
                }
            ]
        };
    }

    // 更新系统概览
    function updateSystemOverview(data) {
        $('#cpuUsage').text(data.cpuUsage);
        $('#cpuName').text('处理器 ' + data.cpuName);
        $('#cpuProgress').css('width', data.cpuUsage);

        $('#memoryTotal').text('系统内存 ' + data.memoryUsed + ' / ' + data.memoryTotal);
        $('#memoryUsage').text(data.memoryUsage);
        $('#memoryProgress').css('width', data.memoryUsage);

        $('#jvmTotal').text('应用内存 ' + data.jvmUsed + ' / ' + data.jvmTotal);
        $('#jvmUsage').text(data.jvmUsage);
        $('#jvmProgress').css('width', data.jvmUsage);

        $('#uptime').text(data.runDay + '天');
        $('#uptimeDetail').text(data.runtimeInfo);
    }

    // 更新硬盘信息
    function updateDiskInfo(disks) {
        const container = $('#diskContainer');
        container.empty();

        disks.forEach(disk => {
            const diskCard = `
                    <div class="col-lg-4 col-md-6">
                        <div class="disk-card">
                            <h5><i class="fas fa-hdd me-2"></i>${disk.name}</h5>
                            <p class="mb-2"><small class="text-muted">路径: ${disk.path}</small></p>

                            <div class="row mb-3">
                                <div class="col-6">
                                    <div class="metric-label">已用容量</div>
                                    <div class="h6 mb-0">${disk.used} / ${disk.size}</div>
                                </div>
                                <div class="col-6">
                                    <div class="metric-label">剩余容量</div>
                                    <div class="h6 mb-0">${disk.free}</div>
                                </div>
                            </div>

                            <div class="progress-custom mb-2">
                                <div class="progress-bar-custom" style="width: ${disk.usage}"></div>
                            </div>
                            <small class="text-muted">使用率: ${disk.usage}</small>
                        </div>
                    </div>
                `;
            container.append(diskCard);
        });
    }

    // 更新时间
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString('zh-CN');
        $('#lastUpdate').text(timeString);
    }

    // 刷新数据
    function refreshData() {
        // 显示加载动画
        $('#loadingOverlay').fadeIn(50);

        $.post('/data', function (data) {
            // 更新所有数据
            updateSystemOverview(data);
            updateDiskInfo(data.diskInfoList);
            updateTime();

            // 隐藏加载动画
            $('#loadingOverlay').fadeOut(50);
        });
    }

    // 初始化
    $(document).ready(function () {
        // 创建粒子效果
        createParticles();

        // 初始加载数据
        refreshData();
    });

    // 添加键盘快捷键
    $(document).keydown(function (e) {
        if (e.key === 'r' || e.key === 'R') {
            refreshData();
        }
    });
</script>
</body>
</html>
